<template>
    <div class="container">
        <navheader v-if="isHeader"></navheader>
        <div class="left">
            <transition name="leftSlide-fade"  >
                <leftMenusVue appear="true"></leftMenusVue>
            </transition>
        </div>
        <div class="right">
            <transition name="rightSlide-fade"  >
                <homerightVue appear="true"></homerightVue>
            </transition>
        </div>
        <footerVue class="footer" />
        <el-switch
        v-model="screenModel"
        class="ml-2 modelchange"
        inline-prompt
        style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
        active-text="关闭全屏"
        inactive-text="全屏模式"
        @change="screenChange"
        size="large"
      />
    </div>
</template>
<script setup>
import { ref , onMounted } from 'vue'

import { useRoute } from 'vue-router';


import navheader from './navheader.vue';
import footerVue from './footer.vue';

// 主页
import leftMenusVue from "./leftMenus.vue";
import homerightVue from './homeright.vue';


let isHeader  = ref(true);
let screenModel = ref(true);

const route=useRoute();


onMounted(()=>{
   
})


const screenChange = (val) => {
  if(!val){
    ue5("exit",{});
  }else{
    ue5("fullScreen",{});
  }
}


</script>

<style scoped lang="less">
   .container{
        width: 3840px; /* 设置宽度为3840px */
        height: 2160px; /* 设置高度为2160px */
        overflow: hidden;
        .modelchange{
          position: absolute;
          bottom: 2%;
          right: 2%;
          transform: scale(2);
          -webkit-transform: scale(2);
        }
        .left{
            width:12%;
            height:80%;
            position: absolute;
            top: 10%;
            // padding: 0px 10px;
            // padding-left: 0px;  
            >div{
                position: absolute;
            }

            .row{
                width: 50px;
                height: auto;
                position: absolute;
                top: 50%;
                right: 0%;
                transform: translate(50px,-50%);
                -webkit-transform: translate(50px,-50%);
            }
        }
        .right{
            width:16%;
            height:80%;
            position: absolute;
            top: 10%;
            right: 0px;
            // padding: 10px;
            // padding-right: 0px;
            >div{
                position: absolute;
            }
        }
        .footer{
            width: 500px;
            height: 180px;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
        }
   }


.leftSlide-fade-enter-active, .leftSlide-fade-leave-active {
  transition: all .5s ease;
}

.leftSlide-fade-enter-from, .leftSlide-fade-leave-to {
  opacity: 0;
  transform: translateY(0%) translateX(-340px);
}

.rightSlide-fade-enter-active, .rightSlide-fade-leave-active {
  transition: all .5s ease;
}

.rightSlide-fade-enter-from, .rightSlide-fade-leave-to {
  opacity: 0;
  transform: translateY(0%) translateX(340px);
}


.bottomSlide-fade-enter-active, .bottomSlide-fade-leave-active {
  transition: all .5s ease;
}

.bottomSlide-fade-enter-from, .bottomSlide-fade-leave-to {
  opacity: 0;
  transform: translateY(60px) translateX(0px);
}



</style>